<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="style.css"/>

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization"></script>
<script src="data/voyages.js"></script>
<script src="map_style.js"></script>

<script>
var COLORS = ["#f66", "#6f6", "#66f", "#ff6", "#6ff", "#f6f", "#f96", "#fff"];
var COUNTRIES = ["DE", "DK", "ES", "FR", "NL", "SE", "UK", "US"];

var map;
var lines = [];

function initialize() {
  map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: new google.maps.LatLng(0, 0),
    zoom: 2,
    maxZoom: 20,
    mapTypeId: google.maps.MapTypeId.TERRAIN,
    disableDefaultUI: true,
    zoomControl: true,
    styles: style
  });

  // Create an array of voyages as Polylines.
  for (var i = 0; i < data.length; i++) {
    var path = [];
    for (var j = 0; j < data[i].path.length; j++) {
      path.push(new google.maps.LatLng(data[i].path[j].lat, data[i].path[j].lng));
    }

    var line = new google.maps.Polyline({
      path: path,
      strokeWeight: 1,
      strokeOpacity: .3,
      strokeColor: COLORS[data[i].country],
      visible: false,
      map: map
    });
    lines.push(line);
  }

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(document.getElementById('controls'));
  map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(document.getElementById('key'));

  // Create the voyage slider.
  var slider = document.getElementById('slider');
  slider.max = data.length - 1;
  slider.addEventListener('change', updateVoyages, false);

  // Create the country key.
  var key = document.getElementById('key');
  for (i in COUNTRIES) {
    var div = document.createElement('div');
    div.setAttribute('class', 'country');
    div.style.backgroundColor = COLORS[i];
    div.textContent = COUNTRIES[i];
    key.appendChild(div);
  }

  updateVoyages();
}

var VOYAGES = 25; // Display this # voyages to left and right of current voyage index.
var oldVal = 0;
var oldLeft = 0;
var oldRight = 0;

function updateVoyages() {
  var val = parseInt(document.getElementById('slider').value);

  // Determine the new left and right bounds.
  var left = val - VOYAGES;
  if (left < 0) left = 0;
  var right = val + VOYAGES;
  if (right >= data.length) right = data.length - 1;

  if (val < oldVal) { // Slider moved left.
    if (right < oldLeft) oldLeft = right;
    for (var i = left; i < oldLeft; i++) {
      lines[i].setVisible(true);
    }
    for (var i = right + 1; i <= oldRight; i++) {
      lines[i].setVisible(false);
    }
  } else { // Slider moved right.
    if (left > oldRight) oldRight = left;
    for (var i = oldLeft; i < left; i++) {
      lines[i].setVisible(false);
    }
    for (var i = oldRight + 1; i <= right; i++) {
      lines[i].setVisible(true);
    }
  }

  oldLeft = left;
  oldRight = right;
  oldVal = val;

  document.getElementById('slider-label').textContent = data[val].path[0].time.substring(0, 4);
}
</script>
</head>

<body onload="initialize()">
  <div id="map_canvas"></div>
  <div id="controls" class="control">
    <label id="slider-label" class="slider-label" for="year-slider"></label>
    <span class="slider-wrap">
      <input type="range" id="slider" class="slider" min="0" max="0" value="0" />
    </span>
  </div>
  <div id="key" class="control"></div>
</body>
</html>
